/* // flex_common */
.fx-container {
    height: 100%;
    display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本语法: Firefox (buggy) */
    display:box;
    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
  } 
  .fx-row {
    display: -webkit-box;
    display: -moz-box; 
    display:box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; }
  
  /**
   * 向从左到右排列（右边对齐）
   * <div class="fx-row"></div>
   */
  .fx-row-reverse {
    display: -webkit-box;
    display: -moz-box; 
    display:box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
  
  /**
   * 纵向从上往下排列（顶对齐）
   * <div class="fx-column"></div>
   */
  .fx-column {
    display: -webkit-box;
    display: -moz-box; 
    display:box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
  
  /**
   * 纵向从上往下排列（底部对齐）
   * <div class="fx-column"></div>
   */
  .fx-column-reverse {
    display: -webkit-box;
    display: -moz-box; 
    display:box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; }
  
  /**
   * wrap策略
   */
  .fx-wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap:wrap;
  }
  
.fx-nowrap {
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
  
  /**
   * 子项目排列
   * <div class="fx-col"></div>
   */
  .fx, .fx-1, .fx-2, .fx-3, .fx-4, .fx-5, .fx-6, .fx-7, .fx-8, .fx-9 {
    display: block;
    width: 100%;
    min-width:0;
  }
  
  /** auto(1 1 auto) **/
  .fx-auto {
    -webkit-box-flex: auto;
    -webkit-flex: auto;
    -moz-box-flex: auto;
    -moz-flex: auto;
    -ms-flex: auto;
    flex: auto; }
  
  .fx-none {
    -webkit-box-flex: none;
    -webkit-flex: none;
    -moz-box-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    flex: none; }
  
  .fx {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  
  .fx-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  
  .fx-2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -moz-box-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    flex: 2; }
  
  .fx-3 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -moz-box-flex: 3;
    -moz-flex: 3;
    -ms-flex: 3;
    flex: 3; }
  
  .fx-4 {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    -moz-box-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4; }
  
  .fx-5 {
    -webkit-box-flex: 5;
    -webkit-flex: 5;
    -moz-box-flex: 5;
    -moz-flex: 5;
    -ms-flex: 5;
    flex: 5; }
  
  .fx-6 {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    -moz-box-flex: 6;
    -moz-flex: 6;
    -ms-flex: 6;
    flex: 6; }
  
  .fx-7 {
    -webkit-box-flex: 7;
    -webkit-flex: 7;
    -moz-box-flex: 7;
    -moz-flex: 7;
    -ms-flex: 7;
    flex: 7; }
  
  .fx-8 {
    -webkit-box-flex: 8;
    -webkit-flex: 8;
    -moz-box-flex: 8;
    -moz-flex: 8;
    -ms-flex: 8;
    flex: 8; }
  
  .fx-9 {
    -webkit-box-flex: 9;
    -webkit-flex: 9;
    -moz-box-flex: 9;
    -moz-flex: 9;
    -ms-flex: 9;
    flex: 9; }
  
  /**
   * 栅格布局
   */
  .grid-5 {
    width: 5%; }
  
  .grid-10 {
    width: 10%; }
  
  .grid-15 {
    width: 15%; }
  
  .grid-20 {
    width: 20%; }
  
  .grid-25 {
    width: 25%; }
  
  .grid-30 {
    width: 30%; }
  
  .grid-33 {
    width: 33.333333333333336%; }
  
  .grid-40 {
    width: 40%; }
  
  .grid-50 {
    width: 50%; }
  
  .grid-60 {
    width: 60%; }
  
  .grid-66 {
    width: 66.66666666666666%; }
  
  .grid-70 {
    width: 70%; }
  
  .grid-75 {
    width: 75%; }
  
  .grid-80 {
    width: 80%; }
  
  .grid-85 {
    width: 85%; }
  
  .grid-90 {
    width: 90%; }
  
  .grid-95 {
    width: 95%; }
  
  .grid-100 {
    width: 100%; }
  
  /**
   * 垂直方向
   * 子元素沿着侧轴排列方式
   * align-items : flex-start | flex-end | center | baseline | stretch;
   */
  .fx-row-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start; }
  
  .fx-row-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end; }
  
  .fx-row-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  
  .fx-row-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch; }
  
  .fx-row-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    -moz-align-items: baseline;
    align-items: baseline; }
  
  /**
   * 水平方向
   * 子元素沿着主轴排列方式
   * justify-content: flex-start | flex-end | center | space-between | space-around;
   */
  .fx-row-left {
    -webkit-box-pack: flex-star;
    -ms-flex-pack: flex-star;
    -webkit-justify-content: flex-star;
    -moz-justify-content: flex-star;
    justify-content: flex-star; }
  
  .fx-row-middle {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center; }
  
  .fx-row-right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end; }
  
  .fx-row-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  
  .fx-row-space-around {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around; }
  
  /**
   * 覆盖父元素的align-items属性，定义了单独的弹性子元素如何沿着侧轴排列
   */
  .fx-col-top {
    -webkit-align-self: flex-start;
    -moz-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start; }
  
  .fx-col-bottom {
    -webkit-align-self: flex-end;
    -moz-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end; }
  
  .fx-col-center {
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-flex-item-align: center;
    align-self: center; }
  
  .fx-col-left {
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start; }
  
  .fx-col-right {
    -webkit-align-content: flex-end;
    -moz-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end; }
  
  .fx-col-middle {
    -webkit-align-content: center;
    -moz-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center; }
  
  .fx-col-space-between {
    -webkit-align-content: space-between;
    -moz-align-content: space-between;
    -ms-flex-line-pack: space-between;
    align-content: space-between; }
  
  .fx-col-space-around {
    -webkit-align-content: space-around;
    -moz-align-content: space-around;
    -ms-flex-line-pack: space-around;
    align-content: space-around; }

